<app-common-header [title]="'SIGN IN'"></app-common-header>
<ion-content>
  <div class="login_content">
    <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="signInWithCode()">
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-label class="login_title">
              {{'auth.signCode.welcome_sign_in' | translate}}
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-header class="header_word">
              {{'auth.signCode.tips1' | translate}}
            </ion-header>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="input-border-bottom">
            <ion-grid>
              <ion-row>
                <ion-col size="9">
                  <ion-input type="number" size=20 placeholder="{{'auth.signCode.code' | translate}}" clearInput="true" required formControlName="verificationCode"></ion-input>
                </ion-col>
                <ion-col size="3" class="send_words" *ngIf="sendView">
                  {{'auth.signCode.resend_after' | translate}} {{smsCountDown}}s
                </ion-col>
                <ion-col size="3" class="send_btn" *ngIf="!sendView">
                  <ion-button fill="clear" size="small" (click)="sendVerificationCode()">
                    {{'auth.signCode.send' | translate}}
                  </ion-button>
                </ion-col>
                <ion-col size="12" *ngIf="verificationCode.invalid && (verificationCode.dirty || verificationCode.touched)">
                  <div *ngIf="verificationCode.errors.required" class="form-error-item">
                    {{'auth.signCode.code_required' | translate}}
                  </div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-button class="customer-btn" fill="clear" expand="block" type="submit" [disabled]='validateForm.invalid || loading'>
              {{'auth.signCode.signin' | translate}}
              <ion-spinner [hidden]="!loading"></ion-spinner>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>